<ol class="breadcrumb" breadcrumb="">
  <li class="breadcrumb-item ng-scope active"><span>Training</span></li>
</ol>
<div class="container-fluid">
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-sm-12">
        <div class="alert alert-success" role="alert" ng-show="message !== ''">
          {{message}}
        </div>
        <div class="alert alert-danger" role="alert" ng-show="generateError !== ''">
          {{ generateError }}
        </div>
        <div class="alert alert-info" role="alert" ng-show="$root.trainings_under_this_process > 0">
          <strong>Training</strong> is currently running.
        </div>
        <div class="card">
          <div class="card-block">
            <div class="form-group row">
              <label for="select" class="col-sm-2 col-form-label">Bot</label>
              <div class="col-sm-10">
                <select id="bot_name" ng-change="getData(bot.bot_id,bot)"
                  ng-options="bot.bot_id as bot.bot_name for bot in botList" ng-model="bot.bot_id" class="form-control">
                  <option value="">Please select a bot</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row" ng-show="bot.bot_id">
      <div class="col-md-12">
        <tabset class="tab-container">
          <ul class="nav nav-tabs">
            <li class="nav-item active"><a class="nav-link active" data-target="#raw_data"
                data-toggle="tab"><span></span><i class="icon-feed"></i> Raw Training Data</a></li>
            <li class="nav-item"><a class="nav-link" data-target="#config" data-toggle="tab"><span></span><i
                  class="icon-settings"></i> Config</a></li>
            <li class="nav-item"><a class="nav-link" data-target="#nlu_data" data-toggle="tab"><span></span><i
                  class="icon-speech"></i> NLU Data</a></li>
            <li class="nav-item"><a class="nav-link" data-target="#stories" data-toggle="tab"><span></span><i
                  class="icon-directions"></i> Stories</a></li>
            <li class="nav-item"><a class="nav-link" data-target="#domain" data-toggle="tab"><span></span><i
                  class="icon-compass"></i> Domain</a></li>
          </ul>
          <div class="tab-content">
            <tab class="tab-pane active" id="raw_data">
              <textarea class="datainput" ng-model="raw_data_stringified">{{ raw_data_stringified }}</textarea>
            </tab>
            <tab class="tab-pane" id="config">
              <textarea class="datainput" ng-model="raw_data.config" ng-change="stringifyData()">{{ raw_data.config }}</textarea>
            </tab>
            <tab class="tab-pane" id="nlu_data">
              <textarea class="datainput" ng-model="raw_data.nlu" ng-change="stringifyData()">{{ raw_data.nlu }}</textarea>
            </tab>
            <tab class="tab-pane" id="stories">
              <textarea class="datainput" ng-model="raw_data.stories" ng-change="stringifyData()">{{ raw_data.stories }}</textarea>
            </tab>
            <tab class="tab-pane" id="domain">
              <textarea class="datainput" ng-model="raw_data.domain" ng-change="stringifyData()">{{ raw_data.domain }}</textarea>
            </tab>
          </div>
        </tabset>
      </div>
    </div>

    <div class="row">
        <div class="col-md-12">
          &nbsp;
        </div>
    </div>

    <div class="row" ng-show="bot.bot_id">
      <div class="col-sm-12">
        <div class="card">
          <div class="card-header">
            <strong>Training</strong>
          </div>
          <div class="card-block">
            <div class="form-group row">
              <label class="col-sm-3 col-form-label">Comment</label>
              <div class="col-sm-9">
                <input type="text" autocomplete="off" ng-model="comment" class="form-control" id="comment">
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 col-form-label">Force Model Update</label>
              <div class="col-sm-9">
                <label class="switch switch-3d switch-success">
                  <input type="checkbox" class="switch-input" ng-model="bool_force_model_update"
                    ng-change="updateData()">
                  <span class="switch-label"></span>
                  <span class="switch-handle"></span>
                </label>
              </div>
            </div>
          </div>
          <div class="card-footer" ng-show="raw_data !== undefined">
            <button type="button" class="btn btn-success" ng-click="trainUsingRawData()"><i
                class="fa fa-magic"></i>&nbsp; Start Training</button>
            <button type="button" class="btn btn-secondary" ng-click="saveRawDataToFile()"><i
                class="fa fa-file"></i>&nbsp; Download File</button>
            <a href="" id="a"></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>